<template>
	<view class="swiperBg">
		<view class="colorBg">
			<view class="swipers fillet" style="padding:32rpx 46rpx 0 46rpx;">
				<swiper v-if="imgUrls.length !=0" class=" circular" indicator-dots="true" :autoplay="true"
					:circular="circular" :interval="interval" :duration="duration" indicator-color="#E4E4E4"
					indicator-active-color="#E93323">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item class="flex">
							<navigator :url='item.url' class='slide-navigator acea-row row-between-wrapper'
								hover-class='none'>
								<image :src="item.img" class="slide-image" mode="widthFix"></image>
							</navigator>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view v-if="isRule == true" class="integral-rule" @click="toRule">
				<text>规则</text>
				<img src="https://yi.qj361.com/20210818220621_ruleIcon.png" alt="">
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		name: 'BannerNew',
		props: {
			bannerConfig: {
				type: Array,
				default: () => {}
			},
		},
		data() {
			return {
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				swiperCur: 0,
				imgUrls: [],
				imageH: 0,
				statusBarHeight: statusBarHeight,
				isRule: true,
				marTop: 63
			};
		},
		watch: {
			imageH(nVal, oVal) {
				this.imageH = nVal
			},
			bannerConfig(val) {
				this.imgUrls = val
				console.log(this.imgUrls[0].url)
			},
			marTop(val) {
				this.marTop = val
				console.log(this.marTop)
			}
		},
		created() {

		},
		mounted() {
			let that = this;
			console.log('333')
			uni.getImageInfo({
				src: that.imgUrls[0].img,
				success: function(res) {
					var height = (750 - 96) * res.height / res.width;
					console.log(height);
					that.$set(that, 'imageH', height);
				}
			});
			this.$nextTick(function() {
				console.log('222')
				// 获取小程序头部高度
				let info = uni.createSelectorQuery().in(this).select(".mp-header");
				console.log("头部信息" + info);
				info.boundingClientRect(function(data) {
					console.log("头部信息1" + data);
					that.marTop = data.height
					console.log(data.height);
				}).exec()
			})
		},
		methods: {
			// swiper
			// swiperChange(e) {
			// 	this.swiperCur = e.detail.current
			// },
			//替换安全域名
			// setDomain: function(url) {
			// 	url = url ? url.toString() : '';
			// 	return url;
			// 	//本地调试打开,生产请注销
			// 	// if (url.indexOf("https://") > -1) return url;
			// 	// else return url.replace('http://', 'https://');
			// },
			toRule: function() {
				// this.$yrouter.push({
				//  path: '/pages/intergralRule/index'
				// });
				uni.navigateTo({
					url: "/pages/intergralRule/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiperBg {
		position: relative;
		// #ifdef APP-PLUS
		padding-top: 100rpx;
		height: 332rpx;

		// #endif
		/* 设置圆角 */
		.fillet {
			border-radius: 8rpx;

			image {
				border-radius: 8rpx;
			}
		}

		.colorBg {
			position: relative;
			left: 0;
			top: 0;
			height: 532rpx;
			width: 100%;
			background-image: url('https://yi.qj361.com/20210813213038_BG.jpg');
			background-size: cover;
			background-position: center;
			overflow: hidden;
		}

		.integral-rule {
			position: absolute;
			right: 46rpx;
			bottom: 18rpx;
			z-index: 666;
			color: #ffffff;
		}

		.swipers {
			z-index: 20;
			height: 324rpx;
			position: relative;
			overflow: hidden;
			margin: 0 auto 208rpx auto;


			swiper,
			.swiper-item,
			image {
				width: 100%;
				height: 100%;
			}

			// image{
			// 	transform: scale(.93);
			// 	transition: all .6s ease;
			// }
			// swiper-item.active {
			// 	image {
			// 		transform: scale(1);
			// 	}
			// }
			// 圆形指示点
			.circular {
				/deep/.uni-swiper-dot {
					width: 8rpx !important;
					height: 8rpx !important;
					background: rgba(238, 0, 0, 1) !important
				}

				/deep/.uni-swiper-dot-active {
					background: #fff !important
				}
			}

			// 方形指示点
			.square {
				/deep/.uni-swiper-dot {
					width: 20rpx !important;
					height: 5rpx !important;
					border-radius: 3rpx;
					background: rgba(0, 0, 0, .4) !important
				}

				/deep/.uni-swiper-dot-active {
					background: #fff !important
				}
			}
		}

		.slide-image {
			width: 656rpx;
			height: 282rpx !important;
		}

		.integral-rule {
			display: flex;
			align-items: center;
		}

		.integral-rule img {
			width: 24rpx;
			height: 24rpx;
		}

		.integral-rule text {
			font-size: 20rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 28rpx;
		}
	}
</style>
